<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>学籍管理中心</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../layui/layui.js"></script>
    <script src="../layui/layui.all.js"></script>

</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">xxxxx 学校</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">业务中心</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="../layui/images/001.jpg" class="layui-nav-img"> 心微凉
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">退出</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">业务审核</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">全部业务</a></dd>
                            <dd><a href="javascript:;">复学类申请</a></dd>
                            <dd><a href="javascript:;">转专业申请</a></dd>
                            <dd><a href="javascript:;">休学类申请</a></dd>
                            <dd><a href="javascript:;">退学类申请</a></dd>
                            <dd><a href="javascript:;">学历证明申请</a></dd>
                            <dd><a href="javascript:;">保留学籍申请</a></dd>
                            <dd><a href="javascript:;">注销学籍申请</a></dd>
                            <dd><a href="javascript:;">在校生学籍证明申请</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">其他事项</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">特殊事项</a></dd>
                            <dd><a href="javascript:;">特殊事项</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <br/>
            </blockquote>


            <form class="layui-form">

                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label" style="float: left;">姓名：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入您的姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">院系：</label>
                        <div class="layui-input-inline">
                            <select name="quiz">
                            <option value="">请选择所属院校</option>
                            <optgroup label="龙子湖校区">
                                <option value="软件学院">软件学院</option>
                                <option value="艺术学院">艺术学院</option>
                            </optgroup>
                            <optgroup label="北林校区">
                                <option value="软件学院">软件学院</option>
                                <option value="艺术学院">艺术学院</option>
                            </optgroup>
                            <optgroup label="英才校区">
                                <option value="软件学院">软件学院</option>
                                <option value="艺术学院">艺术学院</option>
                            </optgroup>
                        </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">办理事项：</label>
                        <div class="layui-input-inline">
                            <select name="quiz">
                            <option value="">请选择搜索事项</option>
                            <option value="复学类申请">复学类申请</option>
                            <option value="转专业申请">转专业申请</option>
                            <option value="休学类申请">休学类申请</option>
                            <option value="退学类申请">退学类申请</option>
                            <option value="学历证明申请">学历证明申请</option>
                            <option value="保留学籍申请">保留学籍申请</option>
                            <option value="注销学籍申请">注销学籍申请</option>
                            <option value="在校生学籍证明申请">在校生学籍证明申请</option>
                        </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <!-- <div class="layui-form-item">
                        <label class="layui-form-label">办理事项：</label>
                        <div class="layui-input-inline">
                          <input type="date"  placeholder="时间" class="layui-input">
                        </div>
                        <div class="layui-inline">
                          <input type="date"  placeholder="时间" class="layui-input">
                        </div>
                    </div> -->

                        <div class="layui-inline">
                            <label class="layui-form-label" style="float: left;">选择时间：</label>
                            <div class="layui-input-inline">
                                <input type="date" name="username" lay-verify="required" placeholder="选择时间" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="date" name="username" lay-verify="required" placeholder="选择时间" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>


                    <div class="layui-inline">

                        <button class="layui-btn layui-btn-radius">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
                    </div>
                </div>

            </form>
            <table class="layui-table" lay-filter="test3">
                <thead>
                    <tr>
                        <th lay-data="{field:'学号',fixed: 'left', width:80, sort: true, edit: 'text'}">学号</th>
                        <th lay-data="{field:'姓名', fixed: 'left',width:90, sort: true, edit: 'text'}">姓名</th>
                        <th lay-data="{field:'性别', width:65, edit: 'text'}">性别</th>
                        <th lay-data="{field:'所在院校', edit: 'text', minWidth: 100}">所在院校</th>
                        <th lay-data="{field:'所在班级', edit: 'text', minWidth: 150}">所在班级</th>
                        <th lay-data="{field:'办理事项', sort: true, edit: 'text', minWidth: 150}">办理事项</th>
                        <th lay-data="{field:'申请原因', edit: 'text'}">申请原因</th>
                        <th lay-data="{field:'联系地址', edit: 'text', minWidth: 200}">联系地址</th>
                        <th lay-data="{field:'联系电话', sort: true, edit: 'text'}">联系电话</th>
                        <th lay-data="{field:'caozuo',minWidth: 200 ,fixed: 'right'}">操作</th>

                    </tr>
                </thead>
            </table>


            <script>
                layui.use('table', function() {
                    var table = layui.table;

                    //监听单元格编辑
                    table.on('edit(test3)', function(obj) {
                        var value = obj.value //得到修改后的值
                            ,
                            data = obj.data //得到所在行所有键值
                            ,
                            field = obj.field; //得到字段
                        layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
                    });
                });
            </script>

            <!-- 此处为分页 -->
            <div id="demo7"></div>

            <div class="layui-footer">
                <!-- 底部固定区域 -->
                xxxxx 学校 - 学籍管理系统
            </div>
        </div>
        <script src="../layui/layui.js"></script>
        <script>
            //JavaScript代码区域
            layui.use('element', function() {
                var element = layui.element;
            });
        </script>
</body>

</html>